<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="zh-CN">
<head>
<title>新建网页</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>
<script>
	function jiang() {
		var top = parseInt($('#woman').css('top')) ;
		top += 23;
		$('#woman').css('top',top+'px');
	}
</script>

<style type="text/css">
table {
	padding: 0;
	border: 0;
	border-collapse: collapse;
}
td {
	height: 19px;
	border: 1px solid gray;
}

#man {
	float:left;
	padding-top: 69px;
}

#woman {
	float:left;
	position: relative;
	top:0px;
}

#ctl {
	height: 1000px;
	float:left;
}
</style>
</head>
    <body>
		<div id="man">
			<table>
				<tr>
					<td>Hid</td>
					<td>name</td>
				</tr>
				<tr>
					<td>A</td>
					<td>屌丝</td>
				</tr>
				<tr>
					<td>B</td>
					<td>杨过</td>
				</tr>
				<tr>
					<td>C</td>
					<td>陈冠希</td>
				</tr>
			</table>
		</div>
		<div id="woman">
			<table>
				<tr>
					<td>Hid</td>
					<td>name</td>
				</tr>
				<tr>
					<td>B</td>
					<td>小龙女</td>
				</tr>
				<tr>
					<td>C</td>
					<td>张柏芝</td>
				</tr>
				<tr>
					<td>D</td>
					<td>死宅女</td>
				</tr>
			</table>
		</div>
		<div id="ctl">
			<input type="button" value="匹配" onclick="jiang()" />
		</div>
    </body>
</html>